/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="route-card-list" :class="type + '-list'">
    <div class="route-card-item" v-for="(item, index) in list" :key="item.id"
    @click="clickType(index, item)"
    @mouseover="hoverInType(index)" @mouseleave="hoverOutType(index)">
        <el-row style="margin-bottom: 12px;">
          <el-col :span="19" class="name">
            <el-tooltip v-if="item.name.length > 12" placement="bottom-start">
              <div slot="content">{{item.name}}</div>
              <span class="devname">{{item.name}}</span>
            </el-tooltip>
            <span v-else>{{item.name}}</span>
          </el-col>
          <el-col :span="5" class="route-devs">
            <span>{{$t('openatc.home.intersection')}}</span>
            <span v-if="type === 'routeOptimize'" class="devs-num green">{{item.devs.length}}</span>
            <span v-if="type === 'groupcontrol'" class="devs-num yellow">{{item.devs.length}}</span>
            <span v-if="type === 'specialserviceroute'" class="devs-num grassgreen">{{item.devs.length}}</span>
          </el-col>
        </el-row>
        <div class="devs-contents">
          <div class="route-point" v-if="item.devs.length > 0">
            <span style="margin-right: 3px;">{{$t('openatc.home.startingpoint')}}:</span>
              <el-tooltip v-if="item.devs[0].name.length > 6" placement="bottom-start">
                <div slot="content">{{item.devs[0].name}}</div>
                <span class="devname">{{item.devs[0].name}}</span>
              </el-tooltip>
              <span class="devname" v-else>{{item.devs[0].name}}</span>
          </div>
          <div class="arrow" v-if="item.devs.length > 1"><i class="iconfont icon-jiantou"></i></div>
          <div class="route-point" v-if="item.devs.length > 1">
            <span style="margin-right: 3px;">{{$t('openatc.home.endpoint')}}:</span>
            <el-tooltip v-if="item.devs[item.devs.length - 1].name.length > 6" placement="bottom-start">
              <div slot="content">{{item.devs[item.devs.length - 1].name}}</div>
              <span class="devname">{{item.devs[item.devs.length - 1].name}}</span>
            </el-tooltip>
            <span class="devname" v-else>{{item.devs[item.devs.length - 1].name}}</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import { getTheme } from '../../../../utils/auth.js'
export default {
  name: 'route-card-list',
  data () {
    return {
    }
  },
  props: {
    type: {
      type: String
    },
    curType: {
      type: String
    },
    list: {
      type: Array
    }
  },
  watch: {
    curType: {
      handler: function (val, oldval) {
        this.resetClicked()
      },
      deep: true
    }
  },
  methods: {
    hoverInType (index) {
      document.querySelectorAll(`.${this.type}-list .route-card-item`)[index].style.background = getTheme() === 'light' ? '#dff0f7' : '#091F40'
    },
    hoverOutType (index) {
      let curCardDom = document.querySelectorAll(`.${this.type}-list .route-card-item`)[index]
      if (curCardDom.getAttribute('clicked')) return
      curCardDom.style.background = getTheme() === 'light' ? '#fff' : '#243D59'
    },
    resetClicked () {
      let allCardDom = document.querySelectorAll(`.${this.type}-list .route-card-item`)
      for (let i = 0; i < allCardDom.length; i++) {
        allCardDom[i].style.background = getTheme() === 'light' ? '#fff' : '#243D59'
        if (allCardDom[i].getAttribute('clicked')) {
          allCardDom[i].removeAttribute('clicked')
        }
      }
    },
    clickType (index, item) {
      this.resetClicked()
      let curCardDom = document.querySelectorAll(`.${this.type}-list .route-card-item`)[index]
      curCardDom.setAttribute('clicked', true)
      curCardDom.style.background = getTheme() === 'light' ? '#dff0f7' : '#091F40'
      let param = {
        type: this.type,
        data: item
      }
      this.$emit('handleClickItem', param)
    }
  },
  mounted () {}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
</style>
<style lang="scss" rel="stylesheet/scss">
</style>
